<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom></HeadCustom>
		<view class="content-wrap bg-F7F8FF">
			<view class="input-item fboxRow Ycenter bg-base" @click="getCity">
				<template v-if="pageType == 'city'">
					<view v-if="fromData.areaProvinceName" class="fboxRow Ycenter flex1 color-main">
						{{ fromData.areaProvinceName || '' }}{{ fromData.areaCityName ? ','+fromData.areaCityName : '' }} {{fromData.areaDistrictName ? ','+fromData.areaDistrictName : '' }}
					</view>
					<view v-else class="fboxRow Ycenter flex1 color-969699">请选择</view>
				</template>
				<template v-if="pageType == 'hometown'">
					<view v-if="fromData.areaHomeProvinceName" class="fboxRow Ycenter flex1 color-main">
						{{ fromData.areaHomeProvinceName || '' }}{{ fromData.areaHomeCityName ? ','+fromData.areaHomeCityName : '' }}{{ fromData.areaHomeDistrictName ? ','+fromData.areaHomeDistrictName : '' }}
					</view>
					<view v-else class="fboxRow Ycenter flex1 color-969699">请选择</view>
				</template>
				<u-icon color="#969699" size="12" name="arrow-right"></u-icon>
			</view>
		</view>
		<BottomBtn title="保存" @btnClick="verifyTap"></BottomBtn>
		<u-picker
			:show="isCity"
			ref="uPicker"
			:columns="columns"
			:defaultIndex="defaultIndex"
			keyName="areaName"
			:closeOnClickOverlay="true"
			@close="isCity = false"
			confirmColor="#ACB4C7"
			cancelColor="#ACB4C7"
			@cancel="isCity = false"
			@change="changeHandler"
			@confirm="confirmHandler"
		></u-picker>
	</view>
</template>

<script>
// import { strTrim } from '@/static/js/base.js';
import BottomBtn from '@/components/bottom-btn/index.vue';
import { areaSelect } from '@/api/index.js';
import { editMixinsMine } from './edit.mixins.mine.js';
export default {
	mixins: [editMixinsMine],
	components: { BottomBtn },
	data() {
		return {
			theme: getApp().globalData.appTheme,
			globalColor: getApp().globalData.globalColor,
			fromData: {
				// 所在城市
				areaCityId: '',
				areaCityName: '',
				areaDistrictId: '',
				areaDistrictName: '',
				areaProvinceId: '',
				areaProvinceName: '',
				// 我的家乡
				areaHomeCityId: '',
				areaHomeCityName: '',
				areaHomeDistrictId: '',
				areaHomeDistrictName: '',
				areaHomeProvinceId: '',
				areaHomeProvinceName: ''
			},
			isCity: false,
			columns: [[], [], []],
			defaultIndex: [0, 0, 0],
			pageType: 'city' // city | hometown
		};
	},
	onLoad(option) {
		if (option && option.type) {
			this.pageType = option.type;
			uni.setNavigationBarTitle({
				title: this.pageType == 'city' ? '所在城市' : '我的家乡'
			});
		}
	},
	methods: {
		// 地区请求
		getSelect(code, columnIndex) {
			areaSelect({
				supCode: code
			}).then(res => {
				res.data.filter((item, index) => {
					if (this.pageType == 'city') {
						if (this.fromData.areaDistrictId && columnIndex == 0 && item.areaCode == this.fromData.areaDistrictId) {
							this.defaultIndex.splice(0, 1, index);
						}
						if (this.fromData.areaCityId && columnIndex == 1 && item.areaCode == this.fromData.areaCityId) {
							this.defaultIndex.splice(1, 1, index);
						}
						if (this.fromData.areaProvinceId && columnIndex == 2 && item.areaCode == this.fromData.areaProvinceId) {
							this.defaultIndex.splice(2, 1, index);
						}
					} else {
						if (this.fromData.areaHomeDistrictId && columnIndex == 0 && item.areaCode == this.fromData.areaHomeDistrictId) {
							this.defaultIndex.splice(0, 1, index);
						}
						if (this.fromData.areaHomeCityId && columnIndex == 1 && item.areaCode == this.fromData.areaHomeCityId) {
							this.defaultIndex.splice(1, 1, index);
						}
						if (this.fromData.areaHomeProvinceId && columnIndex == 2 && item.areaCode == this.fromData.areaHomeProvinceId) {
							this.defaultIndex.splice(2, 1, index);
						}
					}
				});
				this.columns.splice(columnIndex, 1, res.data);
				if (columnIndex < 2) {
					this.getSelect(res.data[this.defaultIndex[columnIndex]].areaCode, columnIndex + 1);
				}
			});
		},
		// 打开地区选择
		getCity() {
			this.getSelect('000000', 0);
			this.isCity = true;
		},
		// 地区选择改变
		changeHandler(e) {
			const {
				columnIndex,
				value,
				values, // values为当前变化列的数组内容
				index,
				// 微信小程序无法将picker实例传出来，只能通过ref操作
				picker = this.$refs.uPicker
			} = e;
			console.log(e);
			// 当第一列值发生变化时，变化第二列(后一列)对应的选项
			if (columnIndex < 2) {
				if (columnIndex == 0) {
					this.defaultIndex = [index, 0, 0];
				}
				this.getSelect(value[columnIndex].areaCode, columnIndex + 1);
			}
		},
		// 城市选择确定
		confirmHandler(e) {
			const { value } = e;
			if (this.pageType == 'city') {
				this.fromData = {
					areaCityId: value[1].areaCode,
					areaCityName: value[1].areaName,
					areaDistrictId: value[2].areaCode,
					areaDistrictName: value[2].areaName,
					areaProvinceId: value[0].areaCode,
					areaProvinceName: value[0].areaName
				};
			} else {
				this.fromData = {
					areaHomeCityId: value[1].areaCode,
					areaHomeCityName: value[1].areaName,
					areaHomeDistrictId: value[2].areaCode,
					areaHomeDistrictName: value[2].areaName,
					areaHomeProvinceId: value[0].areaCode,
					areaHomeProvinceName: value[0].areaName
				};
			}
			this.isCity = false;
		},
		// 验证是否填写
		verifyTap() {
			const { areaProvinceName, areaHomeProvinceName } = this.fromData;
			if (this.pageType == 'city' && areaProvinceName) {
				this.putInfo();
			} else if (this.pageType == 'hometown' && areaHomeProvinceName) {
				this.putInfo();
			} else {
				uni.showToast({
					icon: 'none',
					title: '请选择城市'
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.content-wrap {
	min-height: 100vh;
	padding: 40rpx;
}
::v-deep .u-picker{
	background-color: unset !important;
}

.input-item {
	padding: 0 40rpx;
	height: 88rpx;
	background-color: #fff;
	border-radius: 12rpx;
}

.input-tips {
	padding: 15rpx 40rpx;
	line-height: 32rpx;
}

.icon {
	width: 34rpx;
	height: 36rpx;
}
</style>
